const path = require('path')
// 生成 html 页面，引入编译好的 JS
const HTMLWebpackPlugin = require('html-webpack-plugin')
// 每次编译前先删除输出目录中的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // 运行模式 development production
  mode: 'production',
  // 入口文件
  entry: './src/index.ts',
  // 打包输出配置
  output: {
    // 输出目录
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'index.js',
    environment: {
      // 禁止打包 js 时使用箭头函数（为了兼容 IE）
      arrowFunction: false
    }
  },
  // 配置打包需要的模块
  module: {
    // 配置要加载的规则
    rules: [
      {
        // 对所有的 ts 文件
        test: /\.ts$/,
        // 使用配置的所有 loader
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      'chrome': '58',
                      "ie": '11'
                    },
                    // corejs 大版本
                    'corejs': '3',
                    // 按需加载 corejs
                    'useBuiltIns': 'usage'
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ],
        // 不包含 node_modules 目录下的 ts 文件
        exclude: /node_modules/
      }
    ]
  },

  // 打包插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // 指定使用什么模板来生成最终的 HTML
      template: './src/index.html'
    }),
  ],

  // 
  resolve: {
    extensions: ['.ts', '.js']
  }
}